<template>
  <view class="home-page">
    <!-- 上面登录的相关东西 -->
    <view class="header-card">
      <view class="welcome-speech"
            :style="{ marginTop: `${navigationBarHeight.navbar||36}px` }">
        欢迎使用巴山黄牛供应链
      </view>
    </view>
    <!-- 养殖管理和人员名称 -->
    <view class="aquaculture-management">
      <!-- 人员姓名等等 -->
      <view class="personnel-correlation">
        <image class="head-portrait"
               src="@/static/img/me.png">

        </image>
        <view class="name-and-post">
          <view class="name">超级管理员</view>
          <view class="post">研发部门</view>
        </view>
        <view class="login"
              @tap="logout">
          <uni-icons type="compose"
                     size="20"
                     color="#666"></uni-icons>
          退出登录
        </view>
      </view>
      <!-- 养殖管理的那些项 -->
      <view class="aquaculture-item-box">
        <view class="title">
          养殖管理
        </view>
        <!-- 有权限的时候的数据 -->
        <view class="item-content">
          <navigator :url="item.url"
                     class="item"
                     v-for="(item, index) in aquacultureArr"
                     :key="index">
            <image class="icon"
                   :src="item.icon">
            </image>
            <text class="text">{{ item.name }}</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      aquacultureArr: [
        { name: '养殖进场', icon: '/static/img/me.png', url: '/pages/breedingModule/aquacultureApproach/index' },
        { name: '养殖离场', icon: '/static/img/me.png', url: '/pages/breedingModule/offFarm/index' },
        { name: '屠宰进场', icon: '/static/img/me.png', url: '/pages/breedingModule/slaughterApproach/index' },
        { name: '称重管理2', icon: '/static/img/me.png', url: '/pages/breedingModule/weighingManagementTwo/index' },
        { name: '羊只转栏', icon: '/static/img/me.png', url: '/pages/breedingModule/sheepStall/index' },
        { name: '羊只喂养', icon: '/static/img/me.png', url: '/pages/breedingModule/sheepFeeding/index' },
        { name: '任务列表', icon: '/static/img/me.png', url: '/pages/breedingModule/taskList/index' },
        { name: '羊只诊疗', icon: '/static/img/me.png', url: '/pages/breedingModule/sheepDiagnosis/index' },
        { name: '消毒管理', icon: '/static/img/me.png', url: '/pages/breedingModule/disinfectionManagement/index' },
        { name: '无害化处理', icon: '/static/img/me.png', url: '/pages/breedingModule/harmlessTreatment/index' },
        { name: '羊只保健', icon: '/static/img/me.png', url: '/pages/breedingModule/sheepHealth/index' },
        { name: '羊只免疫', icon: '/static/img/me.png', url: '/pages/breedingModule/sheepAreImmune/index' },
        { name: '发情管理', icon: '/static/img/me.png', url: '/pages/breedingModule/estrus/index' },
        { name: '配种管理', icon: '/static/img/me.png', url: '/pages/breedingModule/breeding/index' },
        { name: '妊检管理', icon: '/static/img/me.png', url: '/pages/breedingModule/pregnancyExamination/index' },
        { name: '分娩管理', icon: '/static/img/me.png', url: '/pages/breedingModule/deliver/index' },
        { name: '断奶管理', icon: '/static/img/me.png', url: '/pages/breedingModule/ablactation/index' },
        { name: '幼崽进场', icon: '/static/img/me.png', url: '/pages/breedingModule/cubsEnter/index' },
        { name: '称重管理', icon: '/static/img/me.png', url: '/pages/breedingModule/weighingManagementOne/index' },
        { name: '分割管理', icon: '/static/img/me.png', url: '/pages/breedingModule/segmentation/index' },
        { name: '排酸管理', icon: '/static/img/me.png', url: '/pages/breedingModule/acidElimination/index' },
        { name: '包装管理', icon: '/static/img/me.png', url: '/pages/breedingModule/package/index' }]
    }
  },
  computed: {
    ...mapState({
      token: state => state.token,
      navigationBarHeight: (state) => state.navigationBarHeight,
    }),
  },
  onLoad () {
    // 当没有token的时候跳转到登录页面
    // if (!this.token) {
    //   uni.reLaunch({
    //     url: '/pages/login/index'
    //   });
    // }
  },
  methods: {
    logout () {
      const that = this;
      uni.showModal({
        title: '提示',
        content: '此操作将退出登录，是否继续？',
        success: function (res) {
          if (res.confirm) {
            // 用户点击确定
            // 存起token
            that.$store.commit('setToken', '');
            // 存用户的信息
            uni.setStorageSync("userAccountInfo", '');
            uni.showToast({
              title: "退出登录成功",
              duration: 2000,
            });
            uni.reLaunch({
              url: '/pages/login/index',
            });
          } else if (res.cancel) {
            // 用户点击取消
            uni.showToast({
              icon: "error",
              title: "取消",
              duration: 2000,
            });
          }
        }
      });

    }
  }
}
</script>

<style lang="scss" scoped>
.home-page {
  height: 100vh;
  background-color: #f5f5f5;
  .aquaculture-management {
    transform: translateY(-128rpx);
    padding: 32rpx;
    .aquaculture-item-box {
      margin-top: 24rpx;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 32rpx 0 64rpx;
      box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.3);
      .item-content {
        display: flex;
        // align-items: center;
        // justify-content: space-around;
        flex-wrap: wrap;
        .item {
          display: flex;
          align-items: center;
          flex-direction: column;
          flex: 0 0 33.33%;
          padding-top: 64rpx;
          .text {
            font-size: 28rpx;
            margin-top: 8rpx;
          }
          .icon {
            height: 84rpx;
            width: 84rpx;
          }
        }
        .item:nth-of-type(-n + 3) {
          padding-top: 0;
        }
      }
      .title {
        height: 32rpx;
        line-height: 32rpx;
        font-size: 30rpx;
        border-left: 6rpx solid $uni-color-success;
        padding-left: 8rpx;
        margin-left: 32rpx;
        font-weight: 600;
        margin-bottom: 48rpx;
      }
    }
    .personnel-correlation {
      display: flex;
      align-items: center;
      background-color: #fff;
      height: 128rpx;
      border-radius: 16rpx;
      padding: 32rpx;
      box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.3);
      .name-and-post {
        flex: 1;
        .name {
          font-size: 36rpx;
          font-weight: 700;
          line-height: 1;
          margin-bottom: 8rpx;
        }
        .post {
          display: inline-block;
          color: $uni-color-success;
          font-size: 24rpx;
          background-color: rgb(240, 250, 233);
          height: 44rpx;
          line-height: 44rpx;
          padding: 0 16rpx;
          border-radius: 24rpx;
        }
      }
      .login {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 700;
        .uni-icons {
          font-weight: 500;
          margin-right: 2rpx;
        }
      }
      .head-portrait {
        margin-right: 24rpx;
        height: 96rpx;
        width: 96rpx;
        border-radius: 48rpx;
        background-color: #f5f5f5;
      }
    }
  }
  .header-card {
    height: 284rpx;
    padding: 20rpx;
    background-color: $uni-color-success;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    color: #fff;
    .welcome-speech {
      text-align: center;
      font-size: 42rpx;
    }
  }
}
</style>
